<template>
  <div>
    <Head/>
    <left/>
    <div style="position: absolute;top: 60px;left: 200px">
      <div>
        <p>标题
          <input type="text" placeholder="请输入标题">
          <van-button>查询</van-button>
          <van-button>重置</van-button>
        </p>
        <p>
          <van-button @click="tianjia">新增</van-button>
          <van-button>删除</van-button>
          <van-button>导入</van-button>
          <van-button>导出</van-button>
        </p>
        <el-dialog v-model="outerVisible" title="新增" width="99%">
          <h1>发布通知</h1>

          <van-row>
            <van-col>
              <div>
                <el-form>
                  <el-form-item label="标题" style="padding-left: 30px">
                    <el-input placeholder="请输入标题" v-model="form.title" style="width: 400px;"/>
                  </el-form-item>

                  <el-form-item label="开始时间">
                    <el-date-picker v-model="form.stime" type="date" placeholder="请选择开始时间" style="width: 400px;"
                                    value-format="YYYY-MM-DD">
                    </el-date-picker>

                  </el-form-item>


                  <el-form-item label="优先级" style="padding-left: 15px">
                    <el-select v-model="form.priority" placeholder="请选择优先级" style="width: 400px;">
                      <el-option label="低" value="1"></el-option>
                      <el-option label="中" value="2"></el-option>
                      <el-option label="高" value="3"></el-option>
                    </el-select>
                  </el-form-item>


                  <el-form-item label="指定用户" v-if="form.status==2">
                    <el-input placeholder="请选择用户" v-model="form.userlist" style="width: 400px;" @click="userstatus"/>
                  </el-form-item>
                  <el-form-item v-else>

                  </el-form-item>


                </el-form>


              </div>
            </van-col>

            <van-col>
              <div style="padding-left: 100px">
                <el-form>
                  <el-form-item label="消息类型">
                    <el-select v-model="form.type" placeholder="请选择消息类型" style="width: 400px">
                      <el-option label="通知公告" value="1"></el-option>
                      <el-option label="系统消息" value="2"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="结束时间">
                    <el-date-picker v-model="form.etime" type="date" placeholder="请选择结束时间" style="width: 400px"
                                    value-format="YYYY-MM-DD">
                    </el-date-picker>

                  </el-form-item>


                  <el-form-item label="通告类型">
                    <el-select v-model="form.status" placeholder="请选择通告类型" style="width: 400px">
                      <el-option label="全部用户" value="1"></el-option>
                      <el-option label="指定用户" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>

              </div>


            </van-col>

          </van-row>
          <div>
            <el-form>
              <el-form-item label="内容" style="padding-left: 25px">
                <el-input
                    v-model="form.content"
                    :rows="10"
                    type="textarea"
                    placeholder="Please input"
                />
              </el-form-item>
            </el-form>
            <el-button type="text" @click="exit" style="margin-left: 1000px" class="exit">关闭</el-button>
            <el-button type="text" @click="add" style="margin-left: 1050px;">确定</el-button>
            <el-dialog v-model="usertype" title="请选择指定用户" width="60%">


              <el-table
                  ref="multipleTable"
                  :data="user"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"/>
                <el-table-column
                    property="id"
                    label="编号"
                    width="150"
                ></el-table-column>
                <el-table-column
                    property="username"
                    label="用户名"
                    width="200"
                ></el-table-column>
                <el-table-column
                    property="mobile"
                    label="手机号"
                    width="200"
                ></el-table-column>
                <el-table-column
                    property="name"
                    label="名称"
                    width="200"
                ></el-table-column>

              </el-table>

              <el-button type="text" @click="exit1" style="margin-left: 1000px" class="exit">关闭</el-button>
              <el-button type="text" @click="exit1" style="margin-left: 1050px;">确定</el-button>

            </el-dialog>
          </div>

          <!--            {{form}}-->

        </el-dialog>
        <div>
          <table border="1" width="800" cellspacing="0" style="text-align: center">
            <tr>
              <td>id</td>
              <td>标题</td>
              <td>消息类型</td>
              <td>发布人</td>
              <td>优先级</td>
              <td>通搞对象</td>
              <td>发布时间</td>
            </tr>
            <tr v-for="i in messagelist" :key="i.id">
              <td>{{ i.id }}</td>
              <td>{{ i.title }}</td>
              <td v-if="i.type==1">系统消息</td>
              <td v-else>通知公告</td>
              <td>{{ i.name }}</td>
              <td v-if="i.priority==1">低</td>
              <td v-else-if="i.priority==2">中</td>
              <td v-else-if="i.priority==3">高</td>
              <td v-if="i.status==1">全体用户</td>
              <td v-else>指定用户</td>
              <td>{{ i.stime }}</td>

            </tr>
          </table>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
import head from "@/components/head";
import left from "@/components/left";
import axios from 'axios'

export default {
  components: {
    'Head': head,
    'left': left
  },
  name: "send",
  data() {
    return {
      form: {'userlist': [], 'userid': localStorage.getItem('userid')},
      outerVisible: false,
      usertype: false,
      user: [],
      messagelist: []

    }
  },
  methods: {
    tianjia() {
      this.outerVisible = true
    },
    exit() {
      this.outerVisible = false
    },
    exit1() {
      this.usertype = false
    },
    handleSelectionChange(val) {
      let list = []
      for (var i = 0; i < val.length; i++) {
        list.push(val[i].username)
        this.form.userlist = list
        console.log(this.form.userlist)

      }
    },
    add() {
      if (this.form.status == 1) {
        this.form.userlist = []
      }
      axios.post('/message/add', this.form).then(res => {
        if (res.data.code == 200) {
          alert('添加成功')
        } else {
          alert('失败')
        }
      })
    },
    get_messagelist() {
      axios.get('/message/add')
          .then(res => {
            if (res.data.code == 200) {
              this.messagelist = res.data.list
            }
          })
    },
    userstatus() {
      this.usertype = true
      axios({'url': '/users/user', 'method': 'get'}).then(res => {
        if (res.data.code == 200) {
          this.user = res.data.list
        }
      })
    }
  },
  mounted() {
    this.get_messagelist()
  }
}
</script>

<style scoped>

</style>